<template>
  <div ref="chartRef" class="chart"/>
</template>

<script setup>
import * as echarts from 'echarts'

import { chunk } from '~utils/util.js'

const props = defineProps({
  chartData: {
    required: true,
    type: Object,
    default: () => {
      return {
        xData: [],
        seriesData: []
      }
    }
  },
  unit: {
    type: String,
    default: () => ''
  },
  colorList: {
    type: Array,
    default: () => ['#28F2B2', '#28F0F2', '#28ADF2']
  },
  // 是否显示y轴分割线
  showYAxisSplitLine: {
    type: Boolean,
    default: () => true
  },
  // y轴分割线类型
  yAxisSplitLineType: {
    type: String,
    default: () => 'solid'
  },
  // 当前索引
  currentIndex: {
    type: Number,
    default: () => 0
  },
  // 分割数
  size: {
    type: Number,
    default: () => 3
  },
  // 是否自动播放
  autoplay: {
    type: Boolean,
    default: () => true
  },
  // 动画延迟
  playInterval: {
    type: Number,
    default: () => 5000
  }
})

const emit = defineEmits(['updateOp'])

const chartRef = ref(null)
let myChart = null

const chartOp = reactive({
  grid: {
    top: '18%',
    left: '6%',
    right: '6%',
    bottom: '8%',
    containLabel: true
  },
  timeline: {
    axisType: 'category',
    data: [],
    currentIndex: props.currentIndex,
    label: {
      show: false
    },
    autoPlay: props.autoplay,
    playInterval: props.playInterval,
    symbol: 'none',
    lineStyle: {
      show: false
    },
    checkpointStyle: {
      symbol: 'none'
    },
    controlStyle: {
      showPlayBtn: false
    },
    left: '8%',
    right: '4%',
    bottom: '-1%'
  },
  legend: {
    itemWidth: 14,
    data: [],
    itemStyle: {
      borderWidth: 0
    },
    top: '5%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    },
    confine: true,
    backgroundColor: '#0b2247',
    borderColor: '#274e77',
    borderRadius: 8,
    textStyle: {
      zIndex: 100,
      fontSize: 12,
      color: '#fff'
    }
  }
})

const drawChart = () => {
  if (!chartRef.value) return
  if (!myChart) {
    myChart = echarts.init(chartRef.value, 'dark')
  }

  const {
    size,
    unit,
    colorList,
    chartData: { xData, seriesData }
  } = props

  const chunkXData = chunk(xData, size)
  seriesData.forEach(item => {
    item.data = chunk(item.data, size)
  })

  const optionsData = []
  chunkXData.forEach((item, i) => {
    const seriesArr = []
    seriesData.forEach((item) => {
      seriesArr.push({
        ...item,
        data: item.data[i]
      })
    })
    optionsData.push({
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        boundaryGap: true,
        axisLabel: {
          color: '#C0E5F1',
          fontSize: 14,
          margin: 20
        },
        axisLine: {
          show: false
        },
        data: item
      },
      yAxis: {
        type: 'value',
        name: unit
      },
      series: seriesArr
    })
  })

  chartOp.options = optionsData
  chartOp.color = colorList
  chartOp.timeline.data = Array.from({ length: size })
  chartOp.legend.data = seriesData.map(item => item.name)
  chartOp.animationEasing = 'linear'
  chartOp.animationDelayUpdate = idx => {
    return idx * 300
  }

  emit('updateOp', chartOp)
  myChart.clear()
  myChart.setOption(chartOp)
}

watch(
  () => props.chartData,
  () => {
    nextTick(() => {
      drawChart()
    })
  },
  {
    immediate: true,
    deep: true
  }
)

const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  window.addEventListener('resize', resizeChart)
})

onBeforeUnmount(() => {
  if (myChart) myChart.dispose()
  window.removeEventListener('resize', resizeChart)
})
</script>

<style lang="scss" scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
